<template>
  <div class="detail-p">
      <div style="height:50px;"></div>
      <div class="card">
          <el-breadcrumb separator="/" class="card-body">
              <el-breadcrumb-item :to="{ path: '/ProcessConsole' }">一体化流程</el-breadcrumb-item>
              <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="card">
          <div class="card-header">电脑及网络维修申请</div>
          <div class="card-body">
              <el-form :model="ruleForm" ref="ruleForm" label-width="140px">
                  <div class="info-ruleForm">
                      <el-form-item label="申请人" prop="applyUserName">
                          <el-input v-model="ruleForm.applyUserName" placeholder="选择其他申请人,流程为代理申请" disabled="true">
                              <div class="setPosition">
                                  <span v-for="(p,index) in userTreeData" :key="p.index">{{ p.name }}<i class="el-icon-close" @click="delPosition(index)"></i></span>
                              </div>
                          </el-input>
                          <el-button type="text" size="medium" class="el-query-tree" @click="$tree('查找责任人2','czzrr')">选择代理人</el-button>
                      </el-form-item>
                      <el-form-item label="申请日期" prop="applyTime">
                          <el-date-picker v-model="ruleForm.applyTime" type="date" placeholder="选择日期"></el-date-picker>
                      </el-form-item>
                      <el-form-item label="部门" prop="department">
                          <el-input v-model="ruleForm.department.label" ref="userFind" disabled="true ">
                              <div class="setPosition">
                                  <span v-for="(p,index) in department" :key="p.index">{{ p.name }}<i class="el-icon-close" @click="delPosition(index)"></i></span>
                              </div>
                          </el-input>
                          <el-button type="text" size="medium" class="el-query-tree" @click="$tree('查找组织','userFind')">查找</el-button>
                      </el-form-item>
                      <el-form-item label="房间号" prop="roomNum">
                          <el-input v-model="ruleForm.roomNum"></el-input>
                      </el-form-item>
                      <el-form-item label="工位号码" prop="mobile">
                          <el-input v-model="ruleForm.mobile"></el-input>
                      </el-form-item>
                      <el-form-item label="重装系统或更换硬盘">
                          <el-switch v-model="ruleForm.isReinstallSystem"></el-switch>
                      </el-form-item>
                      <template v-if="ruleForm.isReinstallSystem">
                            <el-form-item label="操作系统" prop="operatingSystem">
                                <el-select v-model="ruleForm.operatingSystem" placeholder="请选择操作系统">
                                    <el-option value="window10 64bit pro">window10 64bit pro</el-option>
                                    <el-option value="window 7 64bit">window 7 64bit</el-option>
                                    <el-option value="CentOS 7.5">CentOS 7.5</el-option>
                                    <el-option value="RedHat 12">RedHat 12</el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="预装软件列表">
                                <el-checkbox-group v-model="ruleForm.softList" class="authList">
                                    <el-checkbox label="Adobe Acrobat 7.0" name="softList"></el-checkbox>
                                    <el-checkbox label="AutoCAD 2004" name="softList"></el-checkbox>
                                    <el-checkbox label="Phontshop CC2018" name="softList"></el-checkbox>
                                    <el-checkbox label="ACD SEE" name="softList"></el-checkbox>
                                    <el-checkbox label="万能五笔" name="softList"></el-checkbox>
                                    <el-checkbox label="紫光拼音" name="softList"></el-checkbox>
                                    <el-checkbox label="金山词霸" name="softList"></el-checkbox>
                                    <el-checkbox label="Office2007" name="softList"></el-checkbox>
                                    <el-checkbox label="WinRAR" name="softList"></el-checkbox>
                                    <el-checkbox label="PdxReader" name="softList"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="其他软件" prop="otherSoftware">
                                <el-input v-model="ruleForm.otherSoftware" placeholder="多个软件请用 , 逗号隔开 "></el-input>
                            </el-form-item>
                          </template>
                      <el-form-item label="故障描述" prop="applyReason">
                          <el-input type="textarea" v-model="ruleForm.applyReason" placeholder="请说明申请理由"></el-input>
                      </el-form-item>
                  </div>
                  <hr>
                  <div style="padding-bottom:20px;">
                      <h3>选择关联资产</h3>
                      <el-table :data="assetList" style="width: 100%">
                          <el-table-column type="selection" width="55">
                          </el-table-column>
                          <el-table-column prop="code" label="编号" width="120">
                          </el-table-column>
                          <el-table-column prop="name" label="资产名称名称">
                          </el-table-column>
                          <el-table-column prop="ip" label="IP地址">
                          </el-table-column>
                          <el-table-column prop="mac" label="Mac地址">
                          </el-table-column>
                          <el-table-column prop="locastion" label="储存位置">
                          </el-table-column>
                          <el-table-column label="所含设备">
                              <template slot-scope="scope">
                                    <el-popover trigger="hover" placement="top">
                                    <p v-for="item in scope.row.assetsDeviceMappingList" :key="item.index">{{ item.deviceName }}: <span>{{ item.countTotal }}({{ item.unit }})</span></p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">查看设备</el-tag>
                                    </div>
                                    </el-popover>
                                </template>
                          </el-table-column>
                      </el-table>
                  </div>
                  <div class="info-ruleForm">
                      <el-form-item>
                          <el-button type="primary" @click="submitForm('ruleForm')">提交申请</el-button>
                          <el-button @click="resetForm('ruleForm')">重置</el-button>
                      </el-form-item>
                  </div>
              </el-form>
          </div>
      </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "addUser",
  data() {
    return {
      assetList: [
        {
          code:"2222",
          name:"222",
          id:"22323",
          mac:"233",
          locastion:"2233",
          assetsDeviceMappingList:[
            {
              deviceName:"大米粉",
              countTotal:"12",
              unit:"台"
            },
            {
              deviceName:"大米粉",
              countTotal:"12",
              unit:"台"
            }
          ]
        },
        {
          code:"2222",
          name:"222",
          id:"22323",
          mac:"233",
          locastion:"2233",
          assetsDeviceMappingList:[
            {
              deviceName:"大米粉",
              countTotal:"12",
              unit:"台"
            },
            {
              deviceName:"大米粉",
              countTotal:"12",
              unit:"台"
            }
          ]
        }
      ],
      ruleForm: {
        flowKeyName: this.$route.query.key,
        applyUserId: this.$store.getters.user.id,
        applyUserName: this.$store.getters.adminName,
        applyTime: new Date(),
        departmentId: JSON.parse(this.$store.getters.adminDepartment).id,
        preInstalledSoftware: "",
        department: JSON.parse(this.$store.getters.adminDepartment),
        roomNum: "",
        mobile: this.$store.getters.user.privateMobile,
        otherSoftware: "",
        operatingSystem: "",
        applyReason: "",
        isReinstallSystem:false,
        softList: [
          "windows10 pro",
          "汉语词典",
          "PAYPAY",
          "Phontshop",
          "金山顿卡",
          "天行之窗应用",
          "Ceont OS7.6"
        ],

      },
      data: []
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ruleForm.softList.forEach(item => {
            this.ruleForm.preInstalledSoftware =
              this.ruleForm.preInstalledSoftware + item + ";";
          });
          // console.log(this.ruleForm.preInstalledSoftware);
          request({
            url: this.$api.createApplyInternet,
            method: "post",
            data: this.ruleForm
          }).then(res => {
            if (res.code === "000000") {
              this.$message.success("提交申请成功");
              setTimeout(() => {
                this.$router.go(-1);
              }, 100);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  computed: {
    userTreeData: function() {
      if (this.$store.getters.userTreeData !== "") {
        this.ruleForm.applyUserId = this.$store.getters.userTreeData[0].userId;
        console.log(this.$store.getters.userTreeData[0].name);
        return (this.ruleForm.applyUserName = this.$store.getters.userTreeData[0].name);
      } else {
        return this.ruleForm.applyUser;
      }
    },
    //注册树形菜单数据
    department: function() {
      if (this.$store.getters.treeData.ref !== "userFind") {
        return this.ruleForm.department.label;
      } else {
        this.ruleForm.department.label = this.$store.getters.treeData.val;
        this.ruleForm.department.id = this.$store.getters.treeData.id;
        return this.$store.getters.treeData.val;
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    document.body.className = "con-bg";
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    document.body.className = "";
    next();
  }
};
</script>
<style lang="less" scoped>
.info-ruleForm {
  width: 420px;
  margin: 0 auto;
  position: relative;
}

.authList {
  border: 1px solid #f2f2f2;
  padding: 0.5rem 1rem;
}
.el-query-tree {
  position: absolute;
  right: -108px;
  top: 0;
  text-align: left;
  width: 100px;
}
.detail-p {
  padding-top: 25px;
  width: 1200px;
  margin: 0 auto;
}

.el-date-editor {
  width: 100%;
}
.el-select {
  width: 100%;
}
</style>